<!DOCTYPE html>
<html>
<head>
    <title>Keyboard navigation</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">
            <div class="demo-section">
                <h2>T-shirt Size</h2>
                <select id="select" style="width: 250px" accesskey="w">
                    <option>X-Small</option>
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                    <option>X-Large</option>
                    <option>2X-Large</option>
                </select>
            </div>

            <ul class="keyboard-legend">
                <li>
                    <span class="button-preview">
                        <span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span>
                        +
                        <span class="key-button">w</span>
                    </span>
                    <span class="button-descr">
                        focuses the widget
                    </span>
                </li>
            </ul>

            <ul class="keyboard-legend">
                <li>
                    <span class="button-preview">
                        <span class="key-button wider leftAlign">up arrow</span>
                    </span>
                    <span class="button-descr">
                        highlights previous item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button wider leftAlign">left arrow</span>
                    </span>
                    <span class="button-descr">
                        highlights previous item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button wider leftAlign">down arrow</span>
                    </span>
                    <span class="button-descr">
                        highlights next item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button wider leftAlign">right arrow</span>
                    </span>
                    <span class="button-descr">
                        highlights next item
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">home</span>
                    </span>
                    <span class="button-descr">
                        selects first item in the list
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">end</span>
                    </span>
                    <span class="button-descr">
                        selects last item in the list
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button wider rightAlign">enter</span>
                    </span>
                    <span class="button-descr">
                        selects highlighted item
                    </span>
                </li>
               <li>
                    <span class="button-preview">
                        <span class="key-button">esc</span>
                    </span>
                    <span class="button-descr">
                        closes the popup
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">alt</span>
                        <span class="key-button wider leftAlign">down arrow</span>
                    </span>
                    <span class="button-descr">
                        opens the popup
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">alt</span>
                        <span class="key-button wider leftAlign">up arrow</span>
                    </span>
                    <span class="button-descr">
                        closes the popup
                    </span>
                </li>
            </ul>

            <script>
                $(document).ready(function () {
                    $("#select").kendoDropDownList();
                });
            </script>

            <style scoped>
                .demo-section {
                    width: 250px;
                    margin: 35px auto 50px;
                    padding: 30px;
                }
                .demo-section h2 {
                    text-transform: uppercase;
                    font-size: 1.2em;
                    margin-bottom: 10px;
                }
            </style>
        </div>

</body>
</html>
